<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矿山安全评价系统 - AHP-MIV-BP模型</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="container">
            <div class="nav-brand">
                <i class="fas fa-hard-hat"></i>
                <span>矿山安全评价系统</span>
            </div>
            <nav class="nav-menu">
                <a href="#dashboard" class="nav-link active" data-page="dashboard">首页</a>
                <a href="#evaluation" class="nav-link" data-page="evaluation">安全评价</a>
                <a href="#hazard" class="nav-link" data-page="hazard">隐患跟踪</a>
                <a href="#reports" class="nav-link" data-page="reports">报告管理</a>
                <a href="#knowledge" class="nav-link" data-page="knowledge">知识库</a>
                <a href="#users" class="nav-link" data-page="users">人员管理</a>
            </nav>
            <div class="user-info">
                <div class="quick-actions">
                    <button class="quick-btn" title="消息通知">
                        <i class="fas fa-bell"></i>
                        <span class="notification-badge">3</span>
                    </button>
                </div>
                <span>张三</span>
                <div class="user-avatar" onclick="showUserMenu()">
                    <i class="fas fa-user"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-menu">
            <div class="menu-item active" data-page="dashboard">
                <i class="fas fa-tachometer-alt"></i>
                <span>工作台</span>
            </div>
            <div class="menu-item" data-page="evaluation">
                <i class="fas fa-calculator"></i>
                <span>安全评价计算</span>
            </div>
            <div class="menu-item" data-page="hazard">
                <i class="fas fa-exclamation-triangle"></i>
                <span>隐患跟踪管理</span>
            </div>
            <div class="menu-item" data-page="reports">
                <i class="fas fa-file-alt"></i>
                <span>报告管理</span>
            </div>
            <div class="menu-item" data-page="knowledge">
                <i class="fas fa-book"></i>
                <span>知识标准库</span>
            </div>
            <div class="menu-item" data-page="users">
                <i class="fas fa-users"></i>
                <span>人员信息管理</span>
            </div>
        </div>
    </aside>

    <!-- 面包屑导航 -->
    <div class="breadcrumb">
        <div class="breadcrumb-container">
            <i class="fas fa-home"></i>
            <span class="breadcrumb-text">首页 / 工作台</span>
        </div>
    </div>

    <!-- 主内容区域 -->
    <main class="main-content">
        <!-- 工作台页面 -->
        <div id="dashboard" class="page active">
            <div class="page-header">
                <h1>工作台概览</h1>
                <p>基于AHP-MIV-BP模型的智能矿山安全评价系统</p>
            </div>
            
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div class="stat-content">
                        <h3>125</h3>
                        <p>已完成评价</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon warning">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="stat-content">
                        <h3>23</h3>
                        <p>待整改隐患</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon success">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-content">
                        <h3>89</h3>
                        <p>已整改完成</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon danger">
                        <i class="fas fa-times-circle"></i>
                    </div>
                    <div class="stat-content">
                        <h3>12</h3>
                        <p>危险等级矿山</p>
                    </div>
                </div>
            </div>

            <div class="dashboard-content">
                <div class="chart-section">
                    <div class="chart-card">
                        <h3>安全等级分布</h3>
                        <div class="chart-placeholder">
                            <canvas id="safetyLevelChart"></canvas>
                        </div>
                    </div>
                    <div class="chart-card">
                        <h3>隐患整改趋势</h3>
                        <div class="chart-placeholder">
                            <canvas id="hazardTrendChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <div class="recent-activities">
                    <h3>最近活动</h3>
                    <div class="activity-list">
                        <div class="activity-item">
                            <div class="activity-icon">
                                <i class="fas fa-calculator"></i>
                            </div>
                            <div class="activity-content">
                                <p><strong>张三</strong> 完成了 <strong>东风煤矿</strong> 的安全评价</p>
                                <span class="activity-time">2小时前</span>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon warning">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <div class="activity-content">
                                <p><strong>红星金矿</strong> 被评定为 <strong>较危险</strong> 等级</p>
                                <span class="activity-time">4小时前</span>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon success">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="activity-content">
                                <p><strong>李四</strong> 完成了通风设备的整改任务</p>
                                <span class="activity-time">1天前</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 安全评价计算页面 -->
        <div id="evaluation" class="page">
            <div class="page-header">
                <h1>安全评价计算</h1>
                <p>基于AHP-MIV-BP模型进行矿山安全等级智能评估</p>
            </div>
            
            <div class="evaluation-form">
                <div class="form-section">
                    <h3>矿山基本信息</h3>
                    <div class="form-grid">
                        <div class="form-group">
                            <label>评价编号</label>
                            <input type="text" value="SAFE20251009-001" readonly>
                        </div>
                        <div class="form-group">
                            <label>评价日期</label>
                            <input type="date" value="2025-10-09">
                        </div>
                        <div class="form-group">
                            <label>评价人</label>
                            <input type="text" placeholder="请输入评价人姓名">
                        </div>
                        <div class="form-group">
                            <label>矿山名称</label>
                            <input type="text" placeholder="请输入矿山名称">
                        </div>
                        <div class="form-group">
                            <label>所属区域</label>
                            <input type="text" placeholder="请输入所属区域">
                        </div>
                        <div class="form-group">
                            <label>评价对象类别</label>
                            <select>
                                <option>请选择类别</option>
                                <option>煤矿</option>
                                <option>金属矿</option>
                                <option>非金属矿</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-section">
                    <h3>安全指标数据 (15项)</h3>
                    <div class="indicators-grid">
                        <div class="indicator-category">
                            <h4>人员因素</h4>
                            <div class="form-group">
                                <label>工人安全意识与操作能力</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                            <div class="form-group">
                                <label>管理人员的管理能力</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                        </div>

                        <div class="indicator-category">
                            <h4>设备因素</h4>
                            <div class="form-group">
                                <label>采掘设备完好率</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                            <div class="form-group">
                                <label>矿井通风设备完好率</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                            <div class="form-group">
                                <label>瓦斯监测设备完好率</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                            <div class="form-group">
                                <label>防火及消防设施完好率</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                            <div class="form-group">
                                <label>井下排水设备完好率</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                            <div class="form-group">
                                <label>矿井提升设备完好率</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                            <div class="form-group">
                                <label>供电系统设备完好率</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                        </div>

                        <div class="indicator-category">
                            <h4>环境因素</h4>
                            <div class="form-group">
                                <label>风量供需比</label>
                                <input type="number" step="0.01" min="0" placeholder="请输入风量供需比">
                            </div>
                            <div class="form-group">
                                <label>顶板管理难易程度</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                            <div class="form-group">
                                <label>煤层自燃发火倾向性</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                        </div>

                        <div class="indicator-category">
                            <h4>管理因素</h4>
                            <div class="form-group">
                                <label>安全管理制度及落实率</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                            <div class="form-group">
                                <label>应急响应机制完善率</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                            <div class="form-group">
                                <label>安全检查整改落实率</label>
                                <input type="number" step="0.01" min="0" max="1" placeholder="0.00-1.00">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <button class="btn btn-primary" onclick="calculateSafety()">
                        <i class="fas fa-calculator"></i>
                        开始安全评价计算
                    </button>
                </div>
            </div>

            <!-- 计算结果 -->
            <div id="evaluationResult" class="result-section" style="display: none;">
                <h3>评价结果</h3>
                <div class="result-grid">
                    <div class="result-card">
                        <h4>安全等级</h4>
                        <div class="safety-level level-b">B级 - 较安全</div>
                    </div>
                    <div class="result-card">
                        <h4>综合得分</h4>
                        <div class="safety-score">75.6分</div>
                    </div>
                    <div class="result-card">
                        <h4>BP预测值</h4>
                        <div class="bp-score">0.742</div>
                    </div>
                    <div class="result-card">
                        <h4>期望输出值</h4>
                        <div class="expected-score">0.756</div>
                    </div>
                </div>
                <div class="form-actions">
                    <button class="btn btn-success" onclick="generateReport()">
                        <i class="fas fa-print"></i>
                        生成安全评价报告
                    </button>
                </div>
            </div>
        </div>

        <!-- 隐患跟踪管理页面 -->
        <div id="hazard" class="page">
            <div class="page-header">
                <h1>隐患跟踪管理</h1>
                <p>对较危险(C)和危险(D)等级矿山进行整改跟踪</p>
            </div>
            
            <div class="hazard-controls">
                <div class="search-bar">
                    <input type="text" placeholder="搜索任务编号或矿山名称...">
                    <button class="btn btn-primary">
                        <i class="fas fa-search"></i>
                        搜索
                    </button>
                </div>
                <div class="filter-controls">
                    <select>
                        <option>全部状态</option>
                        <option>待整改</option>
                        <option>整改中</option>
                        <option>整改完成</option>
                        <option>复核通过</option>
                    </select>
                    <select>
                        <option>全部等级</option>
                        <option>较危险</option>
                        <option>危险</option>
                    </select>
                </div>
            </div>

            <div class="hazard-table">
                <table>
                    <thead>
                        <tr>
                            <th>任务编号</th>
                            <th>矿山名称</th>
                            <th>指标名称</th>
                            <th>安全等级</th>
                            <th>责任人</th>
                            <th>整改状态</th>
                            <th>指派日期</th>
                            <th>截止日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>HX20251009-001</td>
                            <td>东风煤矿</td>
                            <td>支护设备完好率</td>
                            <td><span class="level-badge danger">危险</span></td>
                            <td>李四</td>
                            <td><span class="status-badge pending">待整改</span></td>
                            <td>2025-10-09</td>
                            <td>2025-10-16</td>
                            <td>
                                <button class="btn btn-sm btn-primary">查看详情</button>
                                <button class="btn btn-sm btn-success">更新状态</button>
                            </td>
                        </tr>
                        <tr>
                            <td>HX20251009-002</td>
                            <td>红星金矿</td>
                            <td>通风设备完好率</td>
                            <td><span class="level-badge warning">较危险</span></td>
                            <td>张三</td>
                            <td><span class="status-badge progress">整改中</span></td>
                            <td>2025-10-08</td>
                            <td>2025-10-15</td>
                            <td>
                                <button class="btn btn-sm btn-primary">查看详情</button>
                                <button class="btn btn-sm btn-success">更新状态</button>
                            </td>
                        </tr>
                        <tr>
                            <td>HX20251009-003</td>
                            <td>蓝天石矿</td>
                            <td>安全管理制度及落实率</td>
                            <td><span class="level-badge warning">较危险</span></td>
                            <td>王五</td>
                            <td><span class="status-badge completed">整改完成</span></td>
                            <td>2025-10-07</td>
                            <td>2025-10-14</td>
                            <td>
                                <button class="btn btn-sm btn-primary">查看详情</button>
                                <button class="btn btn-sm btn-info">复核</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 报告管理页面 -->
        <div id="reports" class="page">
            <div class="page-header">
                <h1>安全评价报告管理</h1>
                <p>查看、检索和打印安全评价报告</p>
            </div>
            
            <div class="report-controls">
                <div class="search-section">
                    <div class="search-bar">
                        <select>
                            <option>按报告编号</option>
                            <option>按矿山名称</option>
                        </select>
                        <input type="text" placeholder="请输入搜索关键词...">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i>
                            检索
                        </button>
                    </div>
                </div>
            </div>

            <div class="report-table">
                <table>
                    <thead>
                        <tr>
                            <th>报告编号</th>
                            <th>矿山名称</th>
                            <th>评价日期</th>
                            <th>评价人</th>
                            <th>安全等级</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>REP20251009-001</td>
                            <td>东风煤矿</td>
                            <td>2025-10-09</td>
                            <td>张三</td>
                            <td><span class="level-badge success">安全</span></td>
                            <td>
                                <button class="btn btn-sm btn-info">预览</button>
                                <button class="btn btn-sm btn-primary">打印</button>
                            </td>
                        </tr>
                        <tr>
                            <td>REP20251008-002</td>
                            <td>红星金矿</td>
                            <td>2025-10-08</td>
                            <td>李四</td>
                            <td><span class="level-badge warning">较危险</span></td>
                            <td>
                                <button class="btn btn-sm btn-info">预览</button>
                                <button class="btn btn-sm btn-primary">打印</button>
                            </td>
                        </tr>
                        <tr>
                            <td>REP20251007-003</td>
                            <td>蓝天石矿</td>
                            <td>2025-10-07</td>
                            <td>王五</td>
                            <td><span class="level-badge danger">危险</span></td>
                            <td>
                                <button class="btn btn-sm btn-info">预览</button>
                                <button class="btn btn-sm btn-primary">打印</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 知识标准库页面 -->
        <div id="knowledge" class="page">
            <div class="page-header">
                <h1>知识标准管理</h1>
                <p>在线查询、浏览与学习标准与知识内容</p>
            </div>
            
            <div class="knowledge-controls">
                <div class="search-bar">
                    <input type="text" placeholder="搜索标题、关键字或分类...">
                    <button class="btn btn-primary">
                        <i class="fas fa-search"></i>
                        搜索
                    </button>
                </div>
                <div class="filter-controls">
                    <select>
                        <option>全部类型</option>
                        <option>标准</option>
                        <option>知识</option>
                    </select>
                    <select>
                        <option>全部分类</option>
                        <option>安全管理</option>
                        <option>设备维护</option>
                        <option>应急预案</option>
                    </select>
                    <select>
                        <option>全部状态</option>
                        <option>在用</option>
                        <option>已发布</option>
                        <option>废止</option>
                    </select>
                </div>
            </div>

            <div class="knowledge-grid">
                <div class="knowledge-card">
                    <div class="card-header">
                        <h4>矿山安全规程</h4>
                        <span class="type-badge standard">标准</span>
                    </div>
                    <div class="card-content">
                        <p class="category">安全管理</p>
                        <p class="summary">国家规定矿山安全操作标准，包含基本安全要求和操作规范...</p>
                        <div class="card-meta">
                            <span class="upload-info">张三 • 2025-01-01</span>
                            <span class="view-count">
                                <i class="fas fa-eye"></i> 120
                            </span>
                        </div>
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-sm btn-primary">查看详情</button>
                        <button class="btn btn-sm btn-secondary">下载</button>
                    </div>
                </div>

                <div class="knowledge-card">
                    <div class="card-header">
                        <h4>瓦斯抽放设备维护</h4>
                        <span class="type-badge knowledge">知识</span>
                    </div>
                    <div class="card-content">
                        <p class="category">设备维护</p>
                        <p class="summary">设备维护操作经验总结，包含日常维护要点和故障处理方法...</p>
                        <div class="card-meta">
                            <span class="upload-info">李四 • 2025-02-15</span>
                            <span class="view-count">
                                <i class="fas fa-eye"></i> 85
                            </span>
                        </div>
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-sm btn-primary">查看详情</button>
                        <button class="btn btn-sm btn-secondary">下载</button>
                    </div>
                </div>

                <div class="knowledge-card">
                    <div class="card-header">
                        <h4>应急预案编制指南</h4>
                        <span class="type-badge standard">标准</span>
                    </div>
                    <div class="card-content">
                        <p class="category">应急预案</p>
                        <p class="summary">矿山应急预案编制的标准格式和要求，涵盖各类应急情况...</p>
                        <div class="card-meta">
                            <span class="upload-info">王五 • 2025-03-10</span>
                            <span class="view-count">
                                <i class="fas fa-eye"></i> 156
                            </span>
                        </div>
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-sm btn-primary">查看详情</button>
                        <button class="btn btn-sm btn-secondary">下载</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 人员信息管理页面 -->
        <div id="users" class="page">
            <div class="page-header">
                <h1>人员信息管理</h1>
                <p>管理员、普通员工、安全员信息管理</p>
            </div>
            
            <div class="user-controls">
                <div class="tab-controls">
                    <button class="tab-btn active" data-tab="admin">管理员</button>
                    <button class="tab-btn" data-tab="employee">普通员工</button>
                    <button class="tab-btn" data-tab="safety">安全员</button>
                </div>
                <button class="btn btn-success">
                    <i class="fas fa-plus"></i>
                    添加用户
                </button>
            </div>

            <!-- 管理员表格 -->
            <div id="admin-table" class="user-table active">
                <table>
                    <thead>
                        <tr>
                            <th>用户名</th>
                            <th>姓名</th>
                            <th>手机号</th>
                            <th>邮箱</th>
                            <th>最后登录时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>admin001</td>
                            <td>张三</td>
                            <td>138****1234</td>
                            <td>admin@example.com</td>
                            <td>2025-10-09 09:30</td>
                            <td><span class="status-badge completed">启用</span></td>
                            <td>
                                <button class="btn btn-sm btn-primary">编辑</button>
                                <button class="btn btn-sm btn-danger">禁用</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 普通员工表格 -->
            <div id="employee-table" class="user-table">
                <table>
                    <thead>
                        <tr>
                            <th>员工编号</th>
                            <th>姓名</th>
                            <th>部门</th>
                            <th>岗位</th>
                            <th>整改任务数</th>
                            <th>完成率</th>
                            <th>考核结果</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>EMP20251009-001</td>
                            <td>李四</td>
                            <td>安全部</td>
                            <td>安全员</td>
                            <td>15</td>
                            <td>87%</td>
                            <td><span class="status-badge completed">优</span></td>
                            <td>
                                <button class="btn btn-sm btn-primary">查看</button>
                                <button class="btn btn-sm btn-secondary">编辑</button>
                            </td>
                        </tr>
                        <tr>
                            <td>EMP20251009-002</td>
                            <td>王五</td>
                            <td>技术部</td>
                            <td>技术员</td>
                            <td>8</td>
                            <td>92%</td>
                            <td><span class="status-badge completed">优</span></td>
                            <td>
                                <button class="btn btn-sm btn-primary">查看</button>
                                <button class="btn btn-sm btn-secondary">编辑</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 安全员表格 -->
            <div id="safety-table" class="user-table">
                <table>
                    <thead>
                        <tr>
                            <th>安全员编号</th>
                            <th>姓名</th>
                            <th>部门</th>
                            <th>资格证号</th>
                            <th>管理范围</th>
                            <th>排查任务数</th>
                            <th>最近排查</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>SAF20251009-001</td>
                            <td>赵六</td>
                            <td>安全部</td>
                            <td>AQYG2023001</td>
                            <td>采掘一区</td>
                            <td>25</td>
                            <td>2025-10-09</td>
                            <td>
                                <button class="btn btn-sm btn-primary">查看</button>
                                <button class="btn btn-sm btn-secondary">编辑</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>

    <script src="script.js"></script>
</body>
</html>